<template>
  <section class="talent-training">
    <h2 class="section-title">身心健康管理人才培训</h2>
    <p class="section-subtitle">创新健康服务模式，双证加持精准弥补市场缺口</p>
    <div class="training-grid">
      <div v-for="(item, i) in trainings" :key="i" class="training-item">
        <img :src="item.icon" alt="培训图标" class="item-icon" />
        <p class="item-title">{{ item.title }}</p>
        <p class="item-desc">{{ item.desc }}</p>
      </div>
    </div>
    <div class="training-ring">
      <img
        src="https://images.health.ufutx.com/202506/20/ed48d12a7bc1972552d18b90273abc36.png"
        alt="环形图"
        class="ring-img"
      />
      <!-- 标签可动态配置，此处简化 -->
      <!--      <div class="ring-labels">-->
      <!--        <span>你将获得</span>-->
      <!--        <span>谁适合来参加？</span>-->
      <!--      </div>-->
    </div>
  </section>
</template>

<script setup lang="ts">
const trainings = [
  {
    icon: 'https://images.health.ufutx.com/202506/20/65a4a4486473beaf55f754e46dbedc2b.png',
    title: '立足行业前沿，掌握核心技能',
    desc: '我们的培训紧密结合在AI健康管理领域的最新应用，让您掌握最前沿的理论知识和实操技能。'
  },
  {
    icon: 'https://images.health.ufutx.com/202506/20/4d0176e3676bf19d42af86758faa27ca.png',
    title: '权威双证加持，提升职业竞争力',
    desc: '完成培训并通过考核，您将有机会获得国家卫健委《营养指导员》和营养师协会《身心健康管理师》双重权威认证，为您的职业发展增添有力筹码。'
  },
  {
    icon: 'https://images.health.ufutx.com/202506/20/65a4a4486473beaf55f754e46dbedc2b.png',
    title: '专业团队赋能，助力职业成长',
    desc: '我们的培训团队由资深健康管理专家、AI技术专家和行业领军人物组成，为您提供全方位的专业指导和支持。您还将有机会获得企业内部专业人士的协同支持，加速您的职业成长。'
  },
  {
    icon: 'https://images.health.ufutx.com/202506/20/79041e18678990eea7f343002473a670.png',
    title: '融入万亿生态，共享发展机遇',
    desc: '友福同享正积极构建庞大的AI健康生态共同体，完成培训的优秀人才将有机会参与到我们的城市合伙人计划或其他合作项目中，共享行业发展的红利。'
  }
]
</script>

<style scoped lang="less">
.talent-training {
  text-align: center;
  padding: 100px 192px;

  .section-title {
    font-size: @font-size-xxl;
    font-weight: bold;
    color: @text-color;
    margin-bottom: 20px;
  }
  .section-subtitle {
    font-size: 20px;
    color: @text-color-secondary;
    margin-bottom: 50px;
  }
  .training-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 40px;
    margin: 0 auto 80px;

    @media (max-width: @tablet-breakpoint) {
      grid-template-columns: repeat(2, 1fr);
    }
    @media (max-width: @mobile-breakpoint) {
      grid-template-columns: 1fr;
    }
  }
  .training-item {
    border-radius: 20px 20px 0px 0px;
    background: #f5f7fe;
    padding: 100px 30px;
    position: relative;
    margin-top: 168px;
    .item-icon {
      position: absolute;
      left: 0;
      top: -168px;
      width: 362px;
    }
    .item-title {
      font-size: @font-size-lg;
      color: @text-color;
      font-weight: bold;
      margin-bottom: 20px;
    }
    .item-desc {
      text-align: left;
      font-size: @font-size-lg;
      color: @text-color-secondary;
    }
  }
  .training-ring {
    position: relative;
    .ring-img {
      width: 100%;
      height: auto;
    }
    .ring-labels {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      align-items: center;
      gap: 20px;
      span {
        font-size: @font-size-xs;
        color: @text-color;
        background: rgba(255, 255, 255, 0.8);
        padding: 5px 10px;
        border-radius: @border-radius-md;
      }
    }
  }
}
</style>
